<template>
    <div>
        <apply-header :flag="'0'"></apply-header>
        <div class="main">
            <Side :step="'1'"></Side>
            <section>
                <div style="color:#999;font-size:20px;font-weight:700;margin-bottom:35px;">Step 1</div>
                <div style="color:#333;font-weight:700;margin-bottom:20px;font-size:32px;">
                    Account Manager Application
                    <span style="color:#FE5442;font-size:18px;">* Required</span>
                </div>
                <div style="color:#6E7274;width:100%;margin-bottom:35px;font-size:18px;">
                    eAssist is an equal opportunity employer and affords equal opportunity to all applicants for all positions without regard to race, color, religion, gender, national origin, age, disability, veteran status or any other status protected under local, state or federal laws.
                </div>
                <div style="color:#2dc3e3;font-size:20px;width:800px;font-weight:700;margin-bottom:20px;">CONTACT INFO</div>
                <el-form ref="form" :model="form" label-position="top"  :inline="true" :rules="rules1">
                    <el-form-item label="First Name" prop="firstName">
                        <el-input ref="firstName" v-model="form.firstName" style="width:350px;"></el-input>
                    </el-form-item>
                    <el-form-item label="Middle Name">
                        <el-input ref="middleName" v-model="form.middleName" style="width:250px;"></el-input>
                    </el-form-item>
                    <el-form-item label="Last Name" prop="lastName">
                        <el-input ref="lastName" v-model="form.lastName" style="width:300px;"></el-input>
                    </el-form-item><br>
                    <el-form-item label="Email" prop="email">
                        <el-input ref="email" v-model="form.email" type="email" style="width:350px;"></el-input>
                    </el-form-item><br>
                    <el-form-item label="Password" prop="password">
                        <el-input ref="password" type="password" v-model="form.password" style="width:350px;"></el-input>
                    </el-form-item>
                    <el-form-item label="Retype Password" prop="password2">
                        <el-input ref="password2" type="password" v-model="form.password2" style="width:350px;"></el-input>
                    </el-form-item><br>
                    <el-form-item label="Moblie Phone" prop="phone">
                        <div class="el-input">
                            <input style="width:300px;" @change="changePhone" v-model="phone" class="el-input__inner" type="text" v-mask="/\(\d{3}\) \d{3}-\d{4}/">
                        </div>
                        <el-input v-show="false" ref="phone" v-model="form.phone" style="width:280px;"></el-input>
                    </el-form-item><br>
                    <el-form-item label="Address" prop="address">
                        <el-input ref="address" v-model="form.address" style="width:500px;"></el-input>
                    </el-form-item><br>
                    <el-form-item label="ZipCode" prop="zipCode">
                        <el-input @keyup.native="changeCode" ref="zipCode" v-model="form.zipCode" style="width:280px;"></el-input>
                    </el-form-item>
                    <el-form-item label="City" prop="city">
                        <el-input ref="city" disabled v-model="form.city" style="width:400px;"></el-input>
                    </el-form-item>
                    <el-form-item label="State" prop="state">
                        <el-input ref="state" disabled v-model="form.state" style="width:280px;"></el-input>
                    </el-form-item>
                    <el-form-item label="Country" prop="country">
                        <el-select placeholder="" ref="country" v-model="form.country">
                            <el-option label="None" value=""></el-option>
                            <el-option label="USA" value="USA"></el-option>
                            <el-option label="Canada" value="Canada"></el-option>
                        </el-select>
                    </el-form-item><br>
                    <el-form-item label="Resume" prop="resumeUrl">
                        <!-- <el-upload>SELECT FILES</el-upload> -->
                        <el-upload
                            ref="resumeUrl"
                            class="upload-demo"
                            :action="this.origin+this.$URL.uploadUrl"
                            :on-success="uploadSuccess"
                            :show-file-list="false"
                            accept=".doc,.docx,.DOC,.DOCX.,.pdf,.PDF">
                            <el-button style="background:#2EC4E3;border:1px solid #2EC4E3;font-weight:700;" type="primary">+ Add Files</el-button>
                            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                            <span style="font-weight:700;font-size:22px;margin-left:30px" v-show="form.resumeUrl">{{form.resumeUrl.split('/')[form.resumeUrl.split('/').length-1]}}</span>
                            <span @click="edit" style="font-weight:700;color:#C2C2C6;font-size:19px;margin-left:20px;cursor:pointer;" v-show="form.resumeUrl">Edit</span>
                            <span @click="remove" style="font-weight:700;color:#C2C2C6;font-size:19px;margin-left:10px;cursor:pointer;" v-show="form.resumeUrl">Remove</span>
                        </el-upload>
                    </el-form-item><br> 
                    <hr style="margin:50px 0;">
                    <div style="color:#2dc3e3;font-size:20px;width:800px;font-weight:700;margin:30px 0;">SKILL SET</div>
                    <el-form-item prop="expectedSalary" label="What salary or rate of pay do you expect to receive if employed?">
                        <el-input ref="expectedSalary" v-model="form.expectedSalary" style="width:300px;"></el-input>
                    </el-form-item><br>
                    <el-form-item prop="available" label="Date of availability to begin employment">
                        <el-date-picker
                            ref="available"
                            v-model="form.available"
                            type="date"
                            placeholder=""
                            style="width:300px;">
                        </el-date-picker>
                    </el-form-item><br>
                    <el-form-item prop="yearsDentalExperience" label="How many years of dental experience have you had?">
                        <el-input ref="yearsDentalExperience" v-model="form.yearsDentalExperience" style="width:300px;"></el-input>
                    </el-form-item><br>
                    <el-form-item prop="yearsFrontOfficeExperience" label="How many years of FRONT OFFICE dental experience have you had?">
                        <el-input ref="yearsFrontOfficeExperience" v-model="form.yearsFrontOfficeExperience" style="width:300px;"></el-input>
                    </el-form-item><br>
                    <el-form-item prop="haveWorked" label="Have you worked for a dental office in the past 12 months?">
                        <el-select placeholder="" ref="haveWorked" v-model="form.haveWorked" style="width:300px;">
                            <el-option label="None" value=""></el-option>
                            <el-option label="Yes" :value="true"></el-option>
                            <el-option label="No" :value="false"></el-option>
                        </el-select>
                    </el-form-item><br>
                    <el-form-item prop="languages" label="Which language(s) are you comfortable communicating in?(English, Spanish, French, etc)">
                        <el-input ref="languages" v-model="form.languages" style="width:300px;"></el-input>
                    </el-form-item><br>
                    <el-form-item label="How many day time hours do you have available to work for us next week--if hired?">
                        <el-input ref="daytimeHours" v-model="form.daytimeHours" style="width:300px;"></el-input>
                    </el-form-item><br>
                    <el-form-item label="How many evening hours do you have available?">
                        <el-input ref="eveningHours" v-model="form.eveningHours" style="width:300px;"></el-input>
                    </el-form-item><br>
                    <el-form-item prop="typingSpeed" label="How fast can you type? ">
                        <el-select placeholder="" ref="typingSpeed" v-model="form.typingSpeed" style="width:300px;">
                            <el-option
                                v-for="item in options1"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item><br>
                    <el-form-item label="Have you ever applied to work with eAssist before?(If yes, please give date)">
                        <el-select placeholder="" ref="isApplied" v-model="form.isApplied" style="width:300px;">
                            <el-option label="None" value=""></el-option>
                            <el-option label="Yes" :value="true"></el-option>
                            <el-option label="No" :value="false"></el-option>
                        </el-select>&nbsp;&nbsp;
                        <el-date-picker
                            v-show="this.form.isApplied == true"
                            ref="previousApplication"
                            v-model="form.previousApplication"
                            type="date"
                            placeholder=""
                            style="width:300px;">
                        </el-date-picker>
                    </el-form-item><br>
                    <el-form-item label="Are you legally authorized/eligible to work in the United States?* (Proof of eligibility will be required upon offer of employment) ">
                        <el-checkbox ref="ableToWorkInUS" v-model="form.ableToWorkInUS"> Yes, I can legally work in the US.</el-checkbox>
                    </el-form-item><br>
                    <el-form-item label="Are you over the age of 18 years?(If no, you may be required to provide authorization) ">
                        <el-checkbox ref="over18" v-model="form.over18"> Yes, I am over the age of 18.</el-checkbox>
                    </el-form-item><br>
                    <el-form-item prop="felony" label="Have you ever been convicted of a felony? (A conviction will not necessarily be a disqualifying event. If Yes, please explain)">
                        <el-input ref="felony" v-model="form.felony" style="width:500px;"></el-input>
                    </el-form-item><br>
                    <el-form-item prop="familyAteAssist" label="Is anyone related to you working with eAssist?(If yes, please give name and relationship to you) ">
                        <el-input ref="familyAteAssist" v-model="form.familyAteAssist" style="width:500px;"></el-input>
                    </el-form-item><br>
                    <el-form-item prop="howLearned" label="How did you hear about this opportunity?">
                        <el-radio-group class="specail" ref="howLearned" v-model="form.howLearned">
                            <el-radio :label="0">KSL</el-radio><br>
                            <el-radio :label="1">Craigslist</el-radio><br>
                            <el-radio :label="2">Search Engine</el-radio><br>
                            <el-radio :label="3">Word Of Mouth</el-radio><br>
                            <el-radio :label="4">Referral</el-radio><br>
                            <el-radio :label="6">Zip Recruiter</el-radio><br>
                            <el-radio :label="7">Monster</el-radio><br>
                            <el-radio :label="8">Indeed</el-radio><br>
                            <el-radio :label="9">i Hire Dental</el-radio><br>
                            <el-radio :label="10">Current customer</el-radio><br>
                            <!-- text field box to allow the applicant to write the name of the eAssist worker. -->
                            <!-- placeholder="write the name of the eAssist worker" -->
                            <el-radio :label="11">Current eAssist Worker&nbsp;&nbsp;
                                <el-input v-show="form.howLearned == 11" style="width:200px;" size="mini" v-model="form.howLearnedOther1"></el-input>
                            </el-radio><br>
                            <el-radio :label="5">Other&nbsp;&nbsp;
                                <el-input style="width:100px;" size="mini" v-show="form.howLearned == 5" v-model="form.howLearnedOther"></el-input>
                            </el-radio>
                        </el-radio-group>
                    </el-form-item><br>
                    <el-form-item prop="expectedHours" label="Interested in a full or part-time position?">
                        <el-radio-group class="specail" ref="expectedHours" v-model="form.expectedHours">
                            <el-radio label="Full-time">Full-time (30-40 hours / week)</el-radio><br>
                            <el-radio label="Part-time">Part-time (10 - 20 hours / week)</el-radio>
                        </el-radio-group>
                    </el-form-item><br>
                    <el-form-item prop="dentalOfficeManagmentSoftware" label="What dental office management software are you competent in?">
                        <el-checkbox-group class="specail" ref="dentalOfficeManagmentSoftware" v-model="form.dentalOfficeManagmentSoftware">
                            <el-checkbox label="Curve">Curve</el-checkbox><el-radio-group v-model="dentalList.item1" v-show="form.dentalOfficeManagmentSoftware.includes('Curve')"><el-radio label="1">&lt;1 year</el-radio><el-radio label="2">1-3 year</el-radio><el-radio label="3">3+ year</el-radio></el-radio-group>
                            <el-checkbox label="Dentrix">Dentrix</el-checkbox><el-radio-group v-model="dentalList.item2" v-show="form.dentalOfficeManagmentSoftware.includes('Dentrix')"><el-radio label="1">&lt;1 year</el-radio><el-radio label="2">1-3 year</el-radio><el-radio label="3">3+ year</el-radio></el-radio-group>
                            <el-checkbox label="Eaglesoft">Eaglesoft</el-checkbox><el-radio-group v-model="dentalList.item3" v-show="form.dentalOfficeManagmentSoftware.includes('Eaglesoft')"><el-radio label="1">&lt;1 year</el-radio><el-radio label="2">1-3 year</el-radio><el-radio label="3">3+ year</el-radio></el-radio-group>
                            <el-checkbox label="Easy Dental">Easy Dental</el-checkbox><el-radio-group v-model="dentalList.item4" v-show="form.dentalOfficeManagmentSoftware.includes('Easy Dental')"><el-radio label="1">&lt;1 year</el-radio><el-radio label="2">1-3 year</el-radio><el-radio label="3">3+ year</el-radio></el-radio-group>
                            <el-checkbox label="Practice Works">Practice Works</el-checkbox><el-radio-group v-model="dentalList.item5" v-show="form.dentalOfficeManagmentSoftware.includes('Practice Works')"><el-radio label="1">&lt;1 year</el-radio><el-radio label="2">1-3 year</el-radio><el-radio label="3">3+ year</el-radio></el-radio-group>
                            <el-checkbox label="Open Dental">Open Dental</el-checkbox><el-radio-group v-model="dentalList.item6" v-show="form.dentalOfficeManagmentSoftware.includes('Open Dental')"><el-radio label="1">&lt;1 year</el-radio><el-radio label="2">1-3 year</el-radio><el-radio label="3">3+ year</el-radio></el-radio-group>
                            <el-checkbox label="Ortho Software">Ortho Software</el-checkbox><el-radio-group v-model="dentalList.item7" v-show="form.dentalOfficeManagmentSoftware.includes('Ortho Software')"><el-radio label="1">&lt;1 year</el-radio><el-radio label="2">1-3 year</el-radio><el-radio label="3">3+ year</el-radio></el-radio-group>
                            <el-checkbox label="Mac Practice">Mac Practice</el-checkbox><el-radio-group v-model="dentalList.item8" v-show="form.dentalOfficeManagmentSoftware.includes('Mac Practice')"><el-radio label="1">&lt;1 year</el-radio><el-radio label="2">1-3 year</el-radio><el-radio label="3">3+ year</el-radio></el-radio-group>
                            <el-checkbox label="Dentimax">Dentimax</el-checkbox><el-radio-group v-model="dentalList.item9" v-show="form.dentalOfficeManagmentSoftware.includes('Dentimax')"><el-radio label="1">&lt;1 year</el-radio><el-radio label="2">1-3 year</el-radio><el-radio label="3">3+ year</el-radio></el-radio-group>
                            <el-checkbox label="Softdent">Softdent</el-checkbox><el-radio-group v-model="dentalList.item10" v-show="form.dentalOfficeManagmentSoftware.includes('Softdent')"><el-radio label="1">&lt;1 year</el-radio><el-radio label="2">1-3 year</el-radio><el-radio label="3">3+ year</el-radio></el-radio-group>
                            <el-checkbox label="Enterprise">Enterprise</el-checkbox><el-radio-group v-model="dentalList.item11" v-show="form.dentalOfficeManagmentSoftware.includes('Enterprise')"><el-radio label="1">&lt;1 year</el-radio><el-radio label="2">1-3 year</el-radio><el-radio label="3">3+ year</el-radio></el-radio-group>
                            <el-checkbox label="Ascend">Ascend</el-checkbox><el-radio-group v-model="dentalList.item12" v-show="form.dentalOfficeManagmentSoftware.includes('Ascend')"><el-radio label="1">&lt;1 year</el-radio><el-radio label="2">1-3 year</el-radio><el-radio label="3">3+ year</el-radio></el-radio-group>
                            <el-checkbox label="Dental Vision">Dental Vision</el-checkbox><el-radio-group v-model="dentalList.item13" v-show="form.dentalOfficeManagmentSoftware.includes('Dental Vision')"><el-radio label="1">&lt;1 year</el-radio><el-radio label="2">1-3 year</el-radio><el-radio label="3">3+ year</el-radio></el-radio-group>
                            <el-checkbox label="Endo Vision">Endo Vision</el-checkbox><el-radio-group v-model="dentalList.item14" v-show="form.dentalOfficeManagmentSoftware.includes('Endo Vision')"><el-radio label="1">&lt;1 year</el-radio><el-radio label="2">1-3 year</el-radio><el-radio label="3">3+ year</el-radio></el-radio-group>
                            <el-checkbox label="WinOMS">WinOMS</el-checkbox><el-radio-group v-model="dentalList.item15" v-show="form.dentalOfficeManagmentSoftware.includes('WinOMS')"><el-radio label="1">&lt;1 year</el-radio><el-radio label="2">1-3 year</el-radio><el-radio label="3">3+ year</el-radio></el-radio-group>
                            <el-checkbox label="DSN">DSN</el-checkbox><el-radio-group v-model="dentalList.item16" v-show="form.dentalOfficeManagmentSoftware.includes('DSN')"><el-radio label="1">&lt;1 year</el-radio><el-radio label="2">1-3 year</el-radio><el-radio label="3">3+ year</el-radio></el-radio-group>
                            <el-checkbox label="Mogo">Mogo</el-checkbox><el-radio-group v-model="dentalList.item17" v-show="form.dentalOfficeManagmentSoftware.includes('Mogo')"><el-radio label="1">&lt;1 year</el-radio><el-radio label="2">1-3 year</el-radio><el-radio label="3">3+ year</el-radio></el-radio-group>
                            <el-checkbox label="Umbie">Umbie</el-checkbox><el-radio-group v-model="dentalList.item18" v-show="form.dentalOfficeManagmentSoftware.includes('Umbie')"><el-radio label="1">&lt;1 year</el-radio><el-radio label="2">1-3 year</el-radio><el-radio label="3">3+ year</el-radio></el-radio-group>
                            <el-checkbox label="TOPS">TOPS</el-checkbox><el-radio-group v-model="dentalList.item19" v-show="form.dentalOfficeManagmentSoftware.includes('TOPS')"><el-radio label="1">&lt;1 year</el-radio><el-radio label="2">1-3 year</el-radio><el-radio label="3">3+ year</el-radio></el-radio-group>
                            <el-checkbox label="Denticon/Planet DDS">Denticon/Planet DDS</el-checkbox><el-radio-group v-model="dentalList.item20" v-show="form.dentalOfficeManagmentSoftware.includes('Denticon/Planet DDS')"><el-radio label="1">&lt;1 year</el-radio><el-radio label="2">1-3 year</el-radio><el-radio label="3">3+ year</el-radio></el-radio-group>
                            <el-checkbox label="ABELDent">ABELDent</el-checkbox><el-radio-group v-model="dentalList.item21" v-show="form.dentalOfficeManagmentSoftware.includes('ABELDent')"><el-radio label="1">&lt;1 year</el-radio><el-radio label="2">1-3 year</el-radio><el-radio label="3">3+ year</el-radio></el-radio-group>
                            <el-checkbox label="XLDent">XLDent</el-checkbox><el-radio-group v-model="dentalList.item22" v-show="form.dentalOfficeManagmentSoftware.includes('XLDent')"><el-radio label="1">&lt;1 year</el-radio><el-radio label="2">1-3 year</el-radio><el-radio label="3">3+ year</el-radio></el-radio-group>
                            <el-checkbox label="Dentech">Dentech</el-checkbox><el-radio-group v-model="dentalList.item23" v-show="form.dentalOfficeManagmentSoftware.includes('Dentech')"><el-radio label="1">&lt;1 year</el-radio><el-radio label="2">1-3 year</el-radio><el-radio label="3">3+ year</el-radio></el-radio-group>
                            <el-checkbox label="QSI">QSI</el-checkbox><el-radio-group v-model="dentalList.item24" v-show="form.dentalOfficeManagmentSoftware.includes('QSI')"><el-radio label="1">&lt;1 year</el-radio><el-radio label="2">1-3 year</el-radio><el-radio label="3">3+ year</el-radio></el-radio-group>
                            <el-checkbox label="PBS">PBS</el-checkbox><el-radio-group v-model="dentalList.item25" v-show="form.dentalOfficeManagmentSoftware.includes('PBS')"><el-radio label="1">&lt;1 year</el-radio><el-radio label="2">1-3 year</el-radio><el-radio label="3">3+ year</el-radio></el-radio-group>
                            <el-checkbox label="Daisy">Daisy</el-checkbox><el-radio-group v-model="dentalList.item26" v-show="form.dentalOfficeManagmentSoftware.includes('Daisy')"><el-radio label="1">&lt;1 year</el-radio><el-radio label="2">1-3 year</el-radio><el-radio label="3">3+ year</el-radio></el-radio-group>
                            <el-checkbox label="Primident">Primident</el-checkbox><el-radio-group v-model="dentalList.item27" v-show="form.dentalOfficeManagmentSoftware.includes('Primident')"><el-radio label="1">&lt;1 year</el-radio><el-radio label="2">1-3 year</el-radio><el-radio label="3">3+ year</el-radio></el-radio-group>
                            <el-checkbox label="Medical Billing">Medical Billing</el-checkbox><el-radio-group v-model="dentalList.item28" v-show="form.dentalOfficeManagmentSoftware.includes('Medical Billing')"><el-radio label="1">&lt;1 year</el-radio><el-radio label="2">1-3 year</el-radio><el-radio label="3">3+ year</el-radio></el-radio-group>
                            <el-checkbox label="Other">Other
                                <el-input v-show="form.dentalOfficeManagmentSoftware.includes('Other')" v-model="form.dentalOfficeManagmentSoftwareOther"></el-input>
                            </el-checkbox><el-radio-group v-model="dentalList.item29" v-show="form.dentalOfficeManagmentSoftware.includes('Other')"><el-radio label="1">&lt;1 year</el-radio><el-radio label="2">1-3 year</el-radio><el-radio label="3">3+ year</el-radio></el-radio-group>
                        </el-checkbox-group>
                    </el-form-item><br>
                    <el-form-item prop="mostProficientSoftware" label="What is your most proficient Dental Practice Management Software?">
                        <el-radio-group class="specail" ref="mostProficientSoftware" v-model="form.mostProficientSoftware">
                            <el-radio label="Curve">Curve</el-radio><br>
                            <el-radio label="Dentrix">Dentrix</el-radio><br>
                            <el-radio label="Eaglesoft">Eaglesoft</el-radio><br>
                            <el-radio label="Easy Dental">Easy Dental</el-radio><br>
                            <el-radio label="Practice Works">Practice Works</el-radio><br>
                            <el-radio label="Open Dental">Open Dental</el-radio><br>
                            <el-radio label="Ortho Software">Ortho Software</el-radio><br>
                            <el-radio label="Mac Practice">Mac Practice</el-radio><br>
                            <el-radio label="Dentimax">Dentimax</el-radio><br>
                            <el-radio label="Softdent">Softdent</el-radio><br>
                            <el-radio label="Enterprise">Enterprise</el-radio><br>
                            <el-radio label="Ascend">Ascend</el-radio><br>
                            <el-radio label="Dental Vision">Dental Vision</el-radio><br>
                            <el-radio label="Endo Vision">Endo Vision</el-radio><br>
                            <el-radio label="WinOMS">WinOMS</el-radio><br>
                            <el-radio label="DSN">DSN</el-radio><br>
                            <el-radio label="Mogo">Mogo</el-radio><br>
                            <el-radio label="Umbie">Umbie</el-radio><br>
                            <el-radio label="TOPS">TOPS</el-radio><br>
                            <el-radio label="Denticon/Planet DDS">Denticon/Planet DDS</el-radio><br>
                            <el-radio label="ABELDent">ABELDent</el-radio><br>
                            <el-radio label="XLDent">XLDent</el-radio><br>
                            <el-radio label="Dentech">Dentech</el-radio><br>
                            <el-radio label="QSI">QSI</el-radio><br>
                            <el-radio label="PBS">PBS</el-radio><br>
                            <el-radio label="Daisy">Daisy</el-radio><br>
                            <el-radio label="Primident">Primident</el-radio><br>
                            <el-radio label="Medical Billing">Medical Billing</el-radio><br>
                            <el-radio label="Other">Other&nbsp;&nbsp;
                                <el-input style="width:100px;" v-show="form.mostProficientSoftware == 'Other'" size="mini" v-model="form.mostProficientSoftwareOther"></el-input>
                            </el-radio>
                        </el-radio-group>
                    </el-form-item><br>
                    <el-form-item prop="dentalSpecialties" label="What Dental Specialties have you billed for? ">
                        <el-checkbox-group class="specail" ref="dentalSpecialties" v-model="form.dentalSpecialties">
                            <el-checkbox label="Orthodontics">Orthodontics</el-checkbox>
                            <el-checkbox label="Oral Surgery">Oral Surgery</el-checkbox>
                            <el-checkbox label="Periodontal">Periodontal</el-checkbox>
                            <el-checkbox label="Only General Practice">Only General Practice</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item><br>
                    <el-form-item prop="currentlyOnPracticeSoftware" label="What practice management software are you currently working on?">
                        <el-checkbox-group class="specail" ref="currentlyOnPracticeSoftware" v-model="form.currentlyOnPracticeSoftware">
                            <el-checkbox label="Curve">Curve</el-checkbox>
                            <el-checkbox label="Dentrix">Dentrix</el-checkbox>
                            <el-checkbox label="Eaglesoft">Eaglesoft</el-checkbox>
                            <el-checkbox label="Easy Dental">Easy Dental</el-checkbox>
                            <el-checkbox label="Practice Works">Practice Works</el-checkbox>
                            <el-checkbox label="Open Dental">Open Dental</el-checkbox>
                            <el-checkbox label="Ortho Software">Ortho Software</el-checkbox>
                            <el-checkbox label="Mac Practice">Mac Practice</el-checkbox>
                            <el-checkbox label="Dentimax">Dentimax</el-checkbox>
                            <el-checkbox label="Softdent">Softdent</el-checkbox>
                            <el-checkbox label="Enterprise">Enterprise</el-checkbox>
                            <el-checkbox label="Ascend">Ascend</el-checkbox>
                            <el-checkbox label="Dental Vision">Dental Vision</el-checkbox>
                            <el-checkbox label="Endo Vision">Endo Vision</el-checkbox>
                            <el-checkbox label="WinOMS">WinOMS</el-checkbox>
                            <el-checkbox label="DSN">DSN</el-checkbox>
                            <el-checkbox label="Mogo">Mogo</el-checkbox>
                            <el-checkbox label="Umbie">Umbie</el-checkbox>
                            <el-checkbox label="TOPS">TOPS</el-checkbox>
                            <el-checkbox label="Denticon/Planet DDS">Denticon/Planet DDS</el-checkbox>
                            <el-checkbox label="ABELDent">ABELDent</el-checkbox>
                            <el-checkbox label="XLDent">XLDent</el-checkbox>
                            <el-checkbox label="Dentech">Dentech</el-checkbox>
                            <el-checkbox label="QSI">QSI</el-checkbox>
                            <el-checkbox label="PBS">PBS</el-checkbox>
                            <el-checkbox label="Daisy">Daisy</el-checkbox>
                            <el-checkbox label="Primident">Primident</el-checkbox>
                            <el-checkbox label="Medical Billing">Medical Billing</el-checkbox>
                            <el-checkbox label="Other">Other&nbsp;&nbsp;
                                <el-input v-show="form.currentlyOnPracticeSoftware == 'Other'" style="width:100px;" size="mini" v-model="form.currentlyOnPracticeSoftwareOther"></el-input>
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item><br>
                    <el-form-item prop="haveExperienceWith" label="Do you have experience with:">
                        <!-- <el-select v-model="form.haveExperienceWith">
                            <el-option label="Dental Accounting using QuickBooks" value="Dental Accounting using QuickBooks"></el-option>
                            <el-option label="Medical Billing" value="Medical Billing"></el-option>
                            <el-option label="Billing Medicaid" value="Billing Medicaid"></el-option>
                            <el-option label="Billing DMO" value="Billing DMO"></el-option>
                            <el-option label="Dentical - California Medicaid" value="Dentical - California Medicaid"></el-option>
                            <el-option label="Auditing accounts and sending patient statements" value="Auditing accounts and sending patient statements"></el-option>
                            <el-option label="None of the above" value="None of the above"></el-option>
                        </el-select> -->
                        <el-checkbox-group class="specail" ref="haveExperienceWith" v-model="form.haveExperienceWith">
                            <el-checkbox label="Dental Accounting using QuickBooks">Dental Accounting using QuickBooks</el-checkbox>
                            <el-checkbox label="Medical Billing">Medical Billing</el-checkbox>
                            <el-checkbox label="Billing Medicaid"></el-checkbox>
                            <el-checkbox label="Billing DMO">Billing DMO</el-checkbox>
                            <el-checkbox label="Dentical - California Medicaid">Dentical - California Medicaid</el-checkbox>
                            <el-checkbox label="Auditing accounts and sending patient statements">Auditing accounts and sending patient statements</el-checkbox>
                            <el-checkbox label="None of the above">None of the above</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item><br>
                    <el-form-item prop="browser" label="What internet browser are you most comfortable using？">
                        <el-radio-group class="specail" ref="browser" v-model="form.browser">
                            <el-radio label="Chrome">Chrome</el-radio><br>
                            <el-radio label="Firefox">Firefox</el-radio><br>
                            <el-radio label="Internet Explorer">Internet Explorer</el-radio><br>
                            <el-radio label="Safari">Safari</el-radio><br>
                            <el-radio label="Not sure">Not sure</el-radio><br>
                            <el-radio label="Other">Other</el-radio>
                        </el-radio-group>
                    </el-form-item><br>
                    <el-form-item prop="isUsingPC" label="Do you plan on using a Mac or PC computer while working for eAssist? ">
                        <el-select placeholder="" ref="isUsingPC" v-model="form.isUsingPC">
                            <el-option label="None" value=""></el-option>
                            <el-option label="Yes" :value="true"></el-option>
                            <el-option label="No" :value="false"></el-option>
                        </el-select>
                    </el-form-item><br>
                    <el-form-item prop="education" label='Please describe your formal educational experiences (Please select all that apply. If you are a college graduate, please write down in "other" what kind of degree you have earned and from which university.) '>
                        <el-checkbox-group class="specail" ref="education" v-model="form.education">
                            <el-checkbox label="No college">No college</el-checkbox>
                            <el-checkbox label="Some college">Some college</el-checkbox>
                            <el-checkbox label="College degree">College degree</el-checkbox>
                            <el-checkbox label="Graduate degree">Graduate degree</el-checkbox>
                            <el-checkbox label="Vocational vetting">Vocational vetting</el-checkbox>
                            <el-checkbox label="Other">Other
                                <el-input v-show="form.education.includes('Other')" v-model="form.educationOther"></el-input>
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item><br>
                    <el-form-item prop="frontOfficeSkillSet" label="Dental Front Office Skill Set (Please select all that apply)">
                        <el-checkbox-group class="specail" ref="frontOfficeSkillSet" v-model="form.frontOfficeSkillSet">
                            <el-checkbox label="I understand how to read ledgers">I understand how to read ledgers</el-checkbox>
                            <el-checkbox label="I know how to post EOBs and all adjustments on patient accounts">I know how to post EOBs and all adjustments on patient accounts</el-checkbox>
                            <el-checkbox label="I am competent at getting insurance companies to pay claims that are denied">I am competent at getting insurance companies to pay claims that are denied</el-checkbox>
                            <el-checkbox label="I know how to work an aging report">I know how to work an aging report</el-checkbox>
                            <el-checkbox label="I know how to send electronic claims">I know how to send electronic claims</el-checkbox>
                            <el-checkbox label="I know how to send electronic attachments">I know how to send electronic attachments</el-checkbox>
                            <el-checkbox label="I know how to use eFax">I know how to use eFax</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item><br>
                    <el-form-item prop="frontOfficeSkillSet" label="How would you rate your computer skill level? (Please select all that apply)">
                        <el-checkbox-group class="specail" ref="computerSkillLevel" v-model="form.computerSkillLevel">
                            <el-checkbox label="I can build or fix a PC">I can build or fix a PC</el-checkbox>
                            <el-checkbox label="I help others with computer problems">I help others with computer problems</el-checkbox>
                            <el-checkbox label="My PCs often get infected with viruses">My PCs often get infected with viruses</el-checkbox>
                            <el-checkbox label="I am able to clean a virus off a PC">I am able to clean a virus off a PC</el-checkbox>
                            <el-checkbox label="I get others to help me with my PC from time to time">I get others to help me with my PC from time to time</el-checkbox>
                            <el-checkbox label="I am proficient in MS Office (word, excel, etc)">I am proficient in MS Office (word, excel, etc)</el-checkbox>
                            <el-checkbox label="I don't own a computer">I don't own a computer</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item><br>
                    <el-form-item label="Are you currently employed?">
                        <el-select placeholder="" ref="isEmployed" v-model="form.isEmployed">
                            <el-option label="None" value=""></el-option>
                            <el-option label="Yes" :value="true"></el-option>
                            <el-option label="No" :value="false"></el-option>
                        </el-select>
                    </el-form-item><br>
                    <el-form-item label="Do you currently or have you ever worked for an office that is an eAssist client?">
                        <el-select placeholder="" ref="IsWorkedForEAsssitClient" v-model="form.IsWorkedForEAsssitClient">
                            <el-option label="None" value=""></el-option>
                            <el-option label="Yes" :value="true"></el-option>
                            <el-option label="No" :value="false"></el-option>
                        </el-select>
                    </el-form-item><br>
                    <el-form-item label="When could you start?">
                        <el-select placeholder="" ref="whenWork" v-model="form.whenWork">
                            <el-option label="None" value=""></el-option>
                            <el-option label="Tomorrow full-time" :value="0"></el-option>
                            <el-option label="Full-time, In two weeks after I give notice to my current employer" :value="1"></el-option>
                            <el-option label="Anytime but only part-time in the evenings" :value="2"></el-option>
                            <el-option label="Other" :value="3"></el-option>
                        </el-select>&nbsp;&nbsp;
                        <el-input v-show="form.whenWork==3" style="width:276px;" v-model="form.whenWorkOther"></el-input>
                    </el-form-item><br>
                    <el-form-item prop="medicaidExperience" label="Do you have experience in Medicaid?">
                        <el-checkbox-group class="specail" ref="medicaidExperience" v-model="form.medicaidExperience">
                            <el-checkbox label="Denti-Cal">Denti-Cal</el-checkbox>
                            <el-checkbox label="Hawaiian Dental Services">Hawaiian Dental Services</el-checkbox>
                            <el-checkbox label="Other Medicaid Plans">Other Medicaid Plans
                                <el-input v-show="form.medicaidExperience.includes('Other Medicaid Plans')" v-model="form.medicaidExperienceOther"></el-input>
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <hr style="margin:50px 0;">
                    <div style="color:#2dc3e3;font-size:20px;width:800px;font-weight:700;margin-bottom:20px;">INTERNET BROADBAND SPECIFICS</div>
                    <el-form-item prop="internetServiceProvider" label="Who is your internet service provider?">
                        <el-input ref="internetServiceProvider" v-model="form.internetServiceProvider" style="width:350px;"></el-input>
                    </el-form-item><br>
                    <el-form-item prop="typeOfInternetConnection" label="Type of internet connection?">
                        <el-select placeholder="" ref="typeOfInternetConnection" v-model="form.typeOfInternetConnection" style="width:350px;">
                            <el-option label="None" value=""></el-option>
                            <el-option label="Cable" value="Cable"></el-option>
                            <el-option label="DSL" value="DSL"></el-option>
                            <el-option label="Fiber" value="Fiber"></el-option>
                            <el-option label="Wireless" value="Wireless"></el-option>
                            <el-option label="Other" value="Other"></el-option>
                        </el-select>
                    </el-form-item><br>
                    <div style="font-size: 14px;color:rgb(129, 135, 137);margin-bottom:15px;">click <a target="_blank" href="http://speedtest.comcast.net/">here</a> to run an internet speed test.<br/>Once your speed test has completed please take a screen shot of your test and upload it in the provided area.</div>
                    <el-form-item prop="pingResults" label="What were the ping results of your internet speed test?">
                        <el-input ref="pingResults" v-model="form.pingResults" style="width:350px;"></el-input>
                    </el-form-item><br>
                    <el-form-item prop="downloadSpeed" label="How fast is your internet DOWNLOAD connection at home? ">
                        <el-input ref="downloadSpeed" v-model="form.downloadSpeed" style="width:350px;"></el-input>
                    </el-form-item><br>
                    <el-form-item prop="uploadSpeed" label="How fast is your internet UPLOAD connection at home?">
                        <el-input ref="uploadSpeed" v-model="form.uploadSpeed" style="width:350px;"></el-input>
                    </el-form-item><br>
                    <el-form-item label="Upload the screen shot" prop="uploadScreenShotUrl">
                        <!-- <el-upload>SELECT FILES</el-upload> -->
                        <el-upload
                            ref="uploadScreenShotUrl"
                            class="upload-demo"
                            :action="this.origin+this.$URL.uploadUrl"
                            :on-success="uploadSuccess1"
                            :show-file-list="false"
                            accept=".jpg,.png,.bmp,.jpeg,.webp,.JPG,.PNG,.BMP,.JPEG,.WEBP,.Jpg,.Png,.Bmp,.Jpeg,.Webp">
                            <el-button style="background:#2EC4E3;border:1px solid #2EC4E3;font-weight:700;" type="primary">+ Add Files</el-button>
                            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                            <span style="font-weight:700;font-size:22px;margin-left:30px" v-show="form.uploadScreenShotUrl">{{form.uploadScreenShotUrl.split('/')[form.uploadScreenShotUrl.split('/').length-1]}}</span>
                            <span @click="edit1" style="font-weight:700;color:#C2C2C6;font-size:19px;margin-left:20px;cursor:pointer;" v-show="form.uploadScreenShotUrl">Edit</span>
                            <span @click="remove1" style="font-weight:700;color:#C2C2C6;font-size:19px;margin-left:10px;cursor:pointer;" v-show="form.uploadScreenShotUrl">Remove</span>
                        </el-upload>
                    </el-form-item>
                    <hr style="margin:50px 0;">
                    <div style="color:#2dc3e3;font-size:20px;width:800px;font-weight:700;margin:20px 0;">EDUCATION, HONORS, & REFERENCES</div>
                    <el-form-item label="Please indicate any academic honors, scolorships, office held, etc (Do not list any which reflect your race, color, religion, gender, national origin, age, disabilities or veteran status)">
                        <el-input ref="academicHonors" v-model="form.academicHonors" rows="5" type="textarea"></el-input>
                    </el-form-item>
                    <el-form-item style="width:99%" label="Describe any specialized vetting, apprenticeships, licenses or skills">
                        <el-input ref="specializedTraining" v-model="form.specializedTraining" rows="5" type="textarea"></el-input>
                    </el-form-item>
                    <el-form-item prop="allDentalOfficeEmployment" label="Please describe ALL DENTAL OFFICE employment history. (Please include the name of the dentist offices, employment dates, salaries, phone numbers, description of duties, and reasons for leaving. Also include whether or not we may contact specific employers.)">
                        <el-input ref="allDentalOfficeEmployment" v-model="form.allDentalOfficeEmployment" rows="5" type="textarea"></el-input>
                    </el-form-item>
                    <el-form-item prop="referenceList" label="List 3 professional references* (Please include names, addresses, phone numbers, relationship / occupation, and years known.)">
                        <el-row :gutter="20" style="color:#2EC4E4;text-align:center;font-weight:700;">
                            <el-col :span="4">NAME</el-col>
                            <el-col :span="7">ADDRESS</el-col>
                            <el-col :span="4">PHONE NUMBER</el-col>
                            <el-col :span="3">OCCUPATION</el-col>
                            <el-col :span="4">YEARS</el-col>
                        </el-row>
                        <el-row v-for="(item, index) in form.referenceList" :key="index" :gutter="20" style="margin-bottom:20px;">
                            <el-col :span="4">
                                <el-input v-model="item.name"></el-input>
                            </el-col>
                            <el-col :span="7">
                                <el-input v-model="item.address"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-input v-model="item.phone"></el-input>
                            </el-col>
                            <el-col :span="3">
                                <el-input v-model="item.occupation"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-input v-model="item.year"></el-input>
                            </el-col>
                            <el-col :span="1" v-show="index>=3" >
                                <el-button type="danger" @click="del(index)">Delete</el-button>
                            </el-col>
                        </el-row>
                        <el-button style="background:#2EC4E3;border:1px solid #2EC4E3;font-weight:700;color:#fff;" @click="addItem">+Add</el-button>
                        <div ref="form.referenceList"></div>
                    </el-form-item>
                </el-form>
                <hr style="margin:50px 0;">
                <div style="font-weight:700;margin:10px 0;">
                    Electronic Signature *
                </div>
                <div style="font-size:14px;color:#818789">
                    APPLICANT ACKNOWLEDGMENT AND AUTHORIZATION ***PLEASE READ CAREFULLY BEFORE SIGNING***  I hereby certify that all of the information provided by me in this application (including any accompanying or required documents) is correct, accurate and complete to the best of my knowledge.  I understand that the falsification, misrepresentation or omission of any information or facts in said documents will be cause for denial of my hiring or immediate termination of any engagement I may have with eAssist, Inc. (“eAssist”), regardless of the timing or circumstances of discovery.  I understand that submission of any application does not guarantee that I will be hired.  I further understand that, should a hiring offer be extended by eAssist, that my engagement with eAssist will be terminable by eAssist with no advance notice, with or without cause, and that it will not be for any specific duration.  I understand that none of the documents, policies, procedures, actions or statements of eAssist or its representatives used during the hiring process shall be deemed a contract of any kind, express or implied, that contradicts the immediately foregoing sentence.  I understand that, as a condition to being hired, I will be required to submit to a pre-hire background check, and that I may also be required to submit to a pre-hire medical examination and/or drug screening.  I understand that failure to cooperate with any of the foregoing will result in a rejection of my application or termination of my association with eAssist.  I hereby authorize all schools, former employers, references, courts and any others who have information about me to provide such information to eAssist and/or any of its representatives, agenda or vendors.
                </div>
                <div style="font-weight:700;margin:20px 0;">
                    BY SIGNING BELOW I ACKNOWLEDGE THAT I HAVE READ, UNDERSTOOD AND AGREE TO THE ABOVE STATEMENTS
                </div>
                <el-input ref="signature" v-model="form.signature" style="width:400px;" placeholder="Type your name here"></el-input>
                <div style="height:25px">
                    <div v-show="signFail" style="height:20px;color:red;">Your signature does not match the name you registered this account under. Please sign as {{this.form.firstName+' '+this.form.lastName}} to continue.</div>
                </div>
                <div style="margin-bottom:10px;">
                    <el-checkbox @change="changeAccept" ref="isAccepted" v-model="form.isAccepted"> By marking the box, I consent to eAssist recording all audio and/or video interviews or discussions I may have with eAssist personnel. </el-checkbox>
                </div>
                <div style="height:25px">
                    <div v-show="acceptFail" style="height:20px;color:red;">Please Accept Terms and Conditions</div>
                </div>
                <el-button @click="submit" class="yellowBtn">NEXT ></el-button><!-- &nbsp;&nbsp;Save for later -->
                <!-- <el-button @click="submit" style="background:#f8d95e;border-color:#f8d95e;font-weight:700;">NEXT></el-button> -->
            </section>
        </div>
    </div>
</template>
<script>
import mask from 'vue-r-mask'
import Side from '@/components/Aside.vue'
import ApplyHeader from "@/components/ApplyHeader";
function setSubmitValue(val1, val2) {
    var valueList = "";
    val1.forEach(n => {
        valueList += '|' + n
    })

    if (val2 && val2.length > 0)
        valueList = valueList + "|" + val2

    return valueList;
}
export default {
    components:{
        Side:Side,
        ApplyHeader
    },
    data() {
        function isEmail (s) {
            return /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(s)
        }
        // function isPhone (s) {
        //     return /^[0-9]{10}$/.test(s)
        // }
        let validateEmail = (rule, value, callback) => {
            if (!isEmail(value)) {
                callback(new Error('The Email field is not a valid e-mail address'))
            } else {
                callback()
            }
        }
        // let validatePhone = (rule, value, callback) => {
        //     if (!isPhone(value)) {
        //         callback(new Error('The phonenumber field is not a valid phonenumber'))
        //     } else {
        //         callback()
        //     }
        // }
        let validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('Required'));
            } else if (value !== this.form.password) {
                callback(new Error('Your password and the confirmed password do not match!'));
            } else {
                callback();
            }
        };
        // let validateSign = (rule, value, callback) => {
        //     if (value === '') {
        //         callback(new Error('Required'));
        //     } else if (value !== this.form.firstName+' '+this.form.lastName) {
        //         callback(new Error('Your password and the confirmed password do not match!'));
        //     } else {
        //         callback();
        //     }
        // };
        let validateList =  (rule, value, callback) => {
            var count = 0
            this.form.referenceList.forEach(n => {
                if(n.name && n.address && n.phone && n.occupation){
                    count++
                }
            })
            if (count>=3) {
                callback()
            } else {
                callback(new Error('required'))
            }
        }
        return {
            phone:'',
            origin:'',
            signFail:false,
            acceptFail:false,
            options1:[
                {value:'<30 words per minute',label:'<30 words per minute'},
                {value:'31-45 words per minute',label:'31-45 words per minute'},
                {value:'46-60 words per minute',label:'46-60 words per minute'},
                {value:'60-75 words per minute',label:'60-75 words per minute'},
                {value:'>75 words per minute',label:'>75 words per minute'}
            ],
            dentalList:{
                item1:'',
                item2:'',
                item3:'',
                item4:'',
                item5:'',
                item6:'',
                item7:'',
                item8:'',
                item9:'',
                item10:'',
                item11:'',
                item12:'',
                item13:'',
                item14:'',
                item15:'',
                item16:'',
                item17:'',
                item18:'',
                item19:'',
                item20:'',
                item21:'',
                item22:'',
                item23:'',
                item24:'',
                item25:'',
                item26:'',
                item27:'',
                item28:'',
                item29:''
            },
            form:{
                firstName:'',
                middleName:'',
                lastName:'',
                email:'',
                password:'',
                password2:'',
                phone:'',
                address:'',
                city:'',
                state:'',
                zipCode:'',
                country:'',
                expectedSalary:'',
                available:'',
                yearsDentalExperience:0,
                yearsFrontOfficeExperience:0,
                languages:'',
                daytimeHours:0,
                eveningHours:0,
                typingSpeed:'',
                isApplied:false,
                previousApplication:'',
                ableToWorkInUS:false,
                over18:false,
                felony:'',
                familyAteAssist:'',
                howLearned:0,
                howLearnedOther:'',
                howLearnedOther1:'',
                expectedHours:'',
                medicaidExperience:[],
                medicaidExperienceOther:'',
                dentalOfficeManagmentSoftware:[],
                dentalOfficeManagmentSoftwareOther:'',
                mostProficientSoftware:'',
                mostProficientSoftwareOther:'',
                currentlyOnPracticeSoftware:[],
                currentlyOnPracticeSoftwareOther:'',
                dentalSpecialties:[],
                haveExperienceWith:[],
                browser:'',
                isUsingPC:'',
                education:[],
                educationOther:'',
                frontOfficeSkillSet:[],
                computerSkillLevel:[],
                isEmployed:false,
                IsWorkedForEAsssitClient:false,
                whenWork:'',
                whenWorkOther:'',
                internetServiceProvider:'',
                typeOfInternetConnection:'',
                pingResults:'',
                downloadSpeed:'',
                uploadSpeed:'',
                academicHonors:'',
                specializedTraining:'',
                allDentalOfficeEmployment:'',
                checkReferenceList:'',
                referenceList:[
                    {name:'',address:'',phone:'',occupation:''},
                    {name:'',address:'',phone:'',occupation:''},
                    {name:'',address:'',phone:'',occupation:''}
                ],
                signature:'',
                isAccepted:false,
                uploadScreenShotUrl:'',
                resumeUrl:'',
                haveWorked:false,
            },
            rules1:{
                firstName: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                lastName: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                email: [
                    { required: true, message: 'Required', trigger: 'blur' },
                    { validator: validateEmail, trigger: 'blur' }
                ],
                password: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                password2: [
                    { required: true, message: 'Required', trigger: 'blur' },
                    { validator: validatePass, trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: 'Required', trigger: 'blur' },
                    // { validator: validatePhone, trigger: 'change' }
                ],
                address: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                city: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                state: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                country: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                zipCode: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                expectedSalary: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                available: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                yearsDentalExperience: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                languages: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                yearsFrontOfficeExperience: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                typingSpeed: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                felony: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                familyAteAssist: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                howLearned: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                expectedHours: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                dentalOfficeManagmentSoftware: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                mostProficientSoftware: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                currentlyOnPracticeSoftware: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                dentalSpecialties: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                haveExperienceWith: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                browser: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                isUsingPC: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                education: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                frontOfficeSkillSet: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                computerSkillLevel: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                internetServiceProvider: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                typeOfInternetConnection: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                pingResults: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                haveWorked: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                downloadSpeed: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                uploadSpeed: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                allDentalOfficeEmployment: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                resumeUrl: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                uploadScreenShotUrl: [
                    { required: true, message: 'Required', trigger: 'blur' },
                ],
                referenceList: [
                    { validator: validateList }
                ]
            }
        }
    },
    methods:{
        changePhone() {
            this.form.phone = this.phone
        },
        changeAccept() {
            if(this.form.isAccepted){
                this.acceptFail = false
            }
        },
        del(index) {
            this.form.referenceList.splice(index,1)
        },
        addItem() {
            this.form.referenceList.push({name:'',address:'',phone:'',occupation:''})
        },
        changeCode() {
            if(this.form.zipCode.length == 5) {
                this.$axios.get('https://zip.getziptastic.com/v2/US/'+this.form.zipCode).then(res => {
                    // console.log(res)
                    this.form.city = res.city
                    this.form.state = res.state
                })
            }else if(this.form.zipCode.length == 6) {
                this.$axios.get('https://zip.getziptastic.com/v2/CA/'+this.form.zipCode).then(res => {
                    this.form.city = res.city
                    this.form.state = res.state
                })
            }
        },
        uploadSuccess(res) {
            console.log(res)
            this.form.resumeUrl = res.data.url
        },
        edit() {
            this.$refs['resumeUrl'].click()
        },
        remove() {
            this.form.resumeUrl = ''
        },
        edit1() {
            this.$refs['upload1'].click()
        },
        remove1() {
            this.form.uploadScreenShotUrl = ''
        },
        uploadSuccess1(res) {
            console.log(res)
            this.form.uploadScreenShotUrl = res.data.url
        },
        submit() {
            console.log(this.phone)
            // this.$refs.form.validateField('phone');
            if(this.form.signature!=this.form.firstName +' '+this.form.lastName){
                this.signFail = true
                return
            }else{
                this.signFail = false
            }
            if(!this.form.isAccepted){
                this.acceptFail = true
                return
            }else{
                this.acceptFail = false
            }
            this.$refs['form'].clearValidate()
            this.$nextTick(() => {
                let listStr = ''
                this.form.referenceList.forEach(n => {
                    listStr += 'Name: ' +n.name+', Address: '+n.address+', Phone number: '+n.phone+', Relationship / occupation: '+n.occupation+'\n';
                })
                this.$refs['form'].validate((valid,object) => {
                    if (valid) {
                        this.$axios.post(this.$URL.applyUrl, {
                            firstName:this.form.firstName,
                            middleName:this.form.middleName,
                            lastName:this.form.lastName,
                            email:this.form.email,
                            password:this.form.password,
                            password2:this.form.password2,
                            phone:this.form.phone,
                            address:this.form.address,
                            city:this.form.city,
                            state:this.form.state,
                            zipCode:this.form.zipCode,
                            country:this.form.country,
                            expectedSalary:this.form.expectedSalary,
                            available:this.form.available,
                            yearsDentalExperience:this.form.yearsDentalExperience,
                            yearsFrontOfficeExperience:this.form.yearsFrontOfficeExperience,
                            languages:this.form.languages,
                            daytimeHours:this.form.daytimeHours,
                            eveningHours:this.form.eveningHours,
                            typingSpeed:this.form.typingSpeed,
                            isApplied:this.form.isApplied,
                            previousApplication:this.form.previousApplication,
                            ableToWorkInUS:this.form.ableToWorkInUS,
                            over18:this.form.over18,
                            felony:this.form.felony,
                            familyAteAssist:this.form.familyAteAssist,
                            howLearned:this.form.howLearned,
                            howLearnedOther:this.form.howLearnedOther,
                            expectedHours:this.form.expectedHours,
                            medicaidExperience:setSubmitValue(this.form.medicaidExperience),
                            dentalOfficeManagmentSoftware:setSubmitValue(this.form.dentalOfficeManagmentSoftware),
                            currentlyOnPracticeSoftware:setSubmitValue(this.form.currentlyOnPracticeSoftware),
                            dentalSpecialties:setSubmitValue(this.form.dentalSpecialties),
                            haveExperienceWith:setSubmitValue(this.form.haveExperienceWith),
                            resumeUrl:this.form.resumeUrl,
                            uploadScreenShotUrl:this.form.uploadScreenShotUrl,
                            browser:this.form.browser,
                            isUsingPC:this.form.isUsingPC,
                            education:this.form.Education,
                            frontOfficeSkillSet:setSubmitValue(this.form.frontOfficeSkillSet),
                            computerSkillLevel:setSubmitValue(this.form.computerSkillLevel),
                            isEmployed:this.form.isEmployed,
                            IsWorkedForEAsssitClient:this.form.IsWorkedForEAsssitClient,
                            whenWork:this.form.whenWork,
                            whenWorkOther:this.form.whenWorkOther,
                            internetServiceProvider:this.form.internetServiceProvider,
                            typeOfInternetConnection:this.form.typeOfInternetConnection,
                            pingResults:this.form.pingResults,
                            downloadSpeed:this.form.downloadSpeed,
                            uploadSpeed:this.form.uploadSpeed,
                            academicHonors:this.form.academicHonors,
                            specializedTraining:this.form.specializedTraining,
                            allDentalOfficeEmployment:this.form.allDentalOfficeEmployment,
                            checkReferenceList:'has value',
                            referenceList:listStr,
                            signature:this.form.signature,
                            isAccepted:this.form.isAccepted,
                            haveWorked:this.form.haveWorked
                        }).then((res) => {
                            if(res.code==0){
                                console.log('apply success！')
                                this.$message.success(res.msg)
                                this.$router.push('/service')
                            }else{
                                this.$message.error(res.msg)
                            }
                            console.log(res)
                        }).catch((err) => {
                            this.$message.error(err)
                            console.log(err)
                        })        
                    } else {
                        // setTimeout(()=>{
                        //     var isError= document.getElementsByClassName("is-error");
                        //     isError[0].querySelector('input').focus();
                        // },1)
                    
                        let dom = this.$refs[Object.keys(object)[0]]
                        dom.$el.scrollIntoView({
                            //滚动到指定节点
                            block: 'center', //值有start,center,end，nearest，当前显示在视图区域中间
                            behavior: 'smooth' //值有auto、instant,smooth，缓动动画（当前是慢速的）
                        })
                        console.log('error submit!!');
                        return false;
                    }
                });   
            })
        },
    },
    mounted() {
        this.$refs.firstName.focus()
        // console.log(location)
        this.origin = this.$axios.defaults.baseURL
    },
    directives: {
		mask: mask,
	}
}
</script>
<style lang="less" scoped>
    .header{
        // height:100px;
        background:#2dc3e3;
        padding:20px;
        position:relative;
    }
    .main{
        display: flex;
        width:100%;

        section{
            background:#f3f3f3;
            flex:1;
            width:100%;
        }
    }
    section{
        padding:70px 30px
    }
</style>